<template>
  <div class="box_container">
    <a-form
      :form="form"
      layout="inline"
      :label-col="{span: 8, offset: 1}"
      :wrapper-col="{span: 14, offset: 1}"
    >
      <a-row>
        <a-col  :md="8" :sm="24">
          <a-form-item label="类别ID">
            <a-input
              placeholder="请输入类别ID"
              :disabled="openType == 1"
              v-decorator="['item_type_id', validatorRules.item_type_id]"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col  :md="8" :sm="24">
          <a-form-item label="类别描述">
            <a-input
              v-decorator="['item_type_desc', validatorRules.item_type_desc]"
              placeholder="请输入类别描述"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col  :md="8" :sm="24">
          <a-form-item label="代码项值">
            <a-input
              placeholder="请输入代码项值"
              :disabled="openType == 1"
              v-decorator="['item_val', validatorRules.item_val]"
            ></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col  :md="8" :sm="24">
          <a-form-item label="代码项描述">
            <a-input
              placeholder="请输入代码项描述"
              v-decorator="['item_desc', validatorRules.item_desc]"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-item>
            <span class="table-edit-submitButtons">
              <a-button type="primary" class="ml8" @click="submitForm('ruleFormCode')">保存</a-button>
              <a-button class="ml8" @click="$emit('update:showChild', false)">取消</a-button>
            </span>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { checkNum } from '@/utils/util'
export default {
  name: 'AddCode',
  props: {
    showChild: {
      type: Boolean,
      default: false
    },
    openType: {
      type: Number,
      default: 0 // 0 添加 1 编辑
    },
    formData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      form: this.$form.createForm(this, {}),
      ruleFormCode: {
        // 代码项表单
        item_type_id: '',
        item_val: '',
        item_type_desc: '',
        item_desc: ''
      },
      validatorRules: {
        item_type_id: { rules: [
          { required: true, message: '请输入类别ID', trigger: 'blur' },
          { validator: checkNum, trigger: 'blur' }]
        },
        item_val: { rules: [
            { required: true, message: '请输入代码项值', trigger: 'blur' },
            { validator: checkNum, trigger: 'blur' }]
        },
        item_type_desc: { rules: [
          { required: true, message: '请输入类别描述', trigger: 'blur' }]
        },
        item_desc: { rules: [
          { required: true, message: '请输入代码项描述', trigger: 'blur' }]
        }
      }
    }
  },
  created () {
    if (this.openType === 1) {
      this.ruleFormCode = Object.assign(this.ruleFormCode, this.formData)
      console.log('this.ruleFormCode', this.ruleFormCode)
    }
  },
  mounted () {
    if (this.openType === 1) {
      this.form.setFieldsValue({
        item_type_id: this.ruleFormCode.item_type_id,
        item_type_desc: this.ruleFormCode.item_type_desc,
        item_desc: this.ruleFormCode.item_desc,
        item_val: this.ruleFormCode.item_val
      })
    }
  },
  methods: {
    submitForm (form) {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('update:showChild', false)
          if (this.openType === 0) {
            this.$emit('addCode', values)
          } else if (this.openType === 1) {
            this.ruleFormCode.item_type_id = values.item_type_id
            this.ruleFormCode.item_type_desc = values.item_type_desc
            this.ruleFormCode.item_desc = values.item_desc
            this.ruleFormCode.item_val = values.item_val
            console.log(this.ruleFormCode)
            this.$emit('updateCode', this.ruleFormCode)
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
